import styled from "styled-components";

export const CateGoryTop = styled.div`

height:.44rem;
background:#ee742f;
display:flex;
align-items:center;
justify-content:center;
ul{
width:1.4rem;
height:.3rem;
display:flex;
position:relative;
border:1px solid #fff;
z-index:0;
border-radius:.15rem;
li{
flex:1;
line-height:.3rem;
text-align:center;
color:#333;
&:last-child{
position:absolute;
width:50%;
height:.3rem;
background:#fff;
z-index:-1;
border-radius:.15rem;
transform:translate(0,0);
transition:all 600ms ease-in;
&.right{
  transform:translate(100%,0);
}
}
&.active{
  transition:all 600ms ease-in;
  color:#333;
}
}
`

export const MainBox = styled.div`
  display: flex;
  height: calc(100vh - 1.7rem);
  overflow: hidden;
  > div:first-child{
    width:.9rem;
    > ul{
    height:100%;
    overflow-y:scroll;
    li{
    height:.5rem;
    text-align:center;
    line-height:.5rem;
    background:#f3f3f3;
    &.active{
    background:#fff;
    span{
    display:inline-block;
    height:100%;
    border-bottom:1px solid #ee742f;
    }
    }
    }
    }
    }
    >div:last-child{
    flex:1;
    background:#fff;
    padding:.2rem .1rem;
    >ul{
    display:flex;
    flex-wrap:wrap;
    overflow-y:scroll;
    height:100%;
    align-content:flex-start;
    li{
    width:33.3333%;
    text-align:center;
    height:.5rem;
    line-height:.5rem;
    color:#666;
    }
    }
`